<template>
  <el-upload
    ref="upload"
    :action="action"
    :limit="1"
    :file-list="fileList"
    :show-file-list="showFileList"
    :on-remove="handleRemove"
    :auto-upload="true"
    :on-change="handleChange"
    :on-success="handleSuccess"
    :disabled="disabled"
  >
    <el-input
      ref="inputRef"
      :value="fileObj.fileName"
      :disabled="disabled"
      :placeholder="placeholder"
      size="small"
      :clearable="true"
      readonly
    >
      <!-- <i slot="append" class="el-icon-upload"></i> -->
      <!-- <i slot="append" class="el-icon-download"></i> -->
    </el-input>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      placeholder: '选择文件',
      fileObj: {
        fileId: '',
        fileName: '',
        name: ''
      },
      fileList: [],
      showFileList: true
    };
  },
  props: {
    // 回显的文件id
    value: {
      type: String,
      default: function() {
        return '';
      }
    },
    // 回显的文件名
    filename: {
      type: String,
      default: function() {
        return '';
      }
    },
    // 上传路径
    action: {
      required: true,
      type: String
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    // 自动上传
    autoUpload: {
      type: Boolean,
      default: function() {
        return false;
      }
    }
  },
  watch: {
    value(newV) {
      this.fileObj.fileId = newV;
    },
    filename(newV) {
      this.fileObj.fileName = newV;
      this.fileObj.name = newV;
      if (this.fileObj.name !== '') {
        this.$nextTick(() => {
          this.fileList = [];
          this.fileList.push(this.fileObj);
          this.$refs.inputRef.$el.children[0].style.color =
            'rgba(0, 0, 0, 0)';
          console.log(this.fileList);
        });
      } else this.showFileList = false;
    }
  },
  methods: {
    // 移除文件时触发的事件
    handleRemove() {
      this.placeholder = '选择文件';
      this.$emit('getFile', {});
    },
    // 选择文件时触发的事件
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1);
    },
    // 文件上传成功时触发的事件
    handleSuccess(res) {
      this.placeholder = '';
      this.$emit('handleSuccess', res);
      console.log('文件已上传到服务器');
    }
    // 上传文件到服务器
    // uploadFile() {
    //   this.$refs.upload.submit();
    //   this.$message.success('上传成功');
    // }
  }
};
</script>

<style lang="scss" scoped>
div {
  height: 40px;

  /deep/ input {
    cursor: pointer;
  }
  /deep/ .el-input__inner {
    height: 40px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  /deep/ .el-input__suffix {
    display: none;
  }
  /deep/ .el-upload-list {
    transform: translate(8px, -127%);
    .el-upload-list__item {
      width: 200px;
      margin: 0;
      .el-icon-close-tip {
        display: none;
      }
    }
  }
  /deep/ .el-list-enter-active,
  /deep/ .el-list-leave-active {
    transition: none;
  }
}
</style>
